<template>
  <div class="home">
    <Toolbar @changeLeftNav="changeLeftNav" />
    <main>
      <section>
        <LeftNav :isActive="isActive" @changeLeftNav="changeLeftNav" />
      </section>
      <section>
        <!-- <MyTabs>
        </MyTabs> -->
        <!-- <CustomTabs /> -->
        <CustomDiv>
          <MyTabs></MyTabs>
        </CustomDiv>
      </section>
    </main>
  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar'
import MyTabs from '@/components/MyTabs'
import LeftNav from '@/components/LeftNav'
// import CustomTabs from '@/components/CustomTabs'
import componentList from '@/custom-component/component-list.js'
import { mapMutations } from 'vuex'
import CustomDiv from '@/components/CustomDiv'
import { perToParseInt,floatRound } from '@/utils'
export default {
  name: 'Home',
  components: {
    Toolbar,
    MyTabs,
    LeftNav,
    // CustomTabs,
    CustomDiv
  },
  data() {
    return {
      isActive: false,
      dialogExample: false, //是否显示分析实例
      componentIndex: -1,
    }
  },
  mounted() {
    this.getColumnList() //获取分析实例列表数据
    this.getDivData() //获取外框数据
  },
  methods: {
    ...mapMutations([
      'setDefaultSettingList',
      'setColumnList',
      'setCustomDivList'
    ]),
    changeLeftNav(flag) {
      this.isActive = flag
    },
    //获取分析实例列表数据
    getColumnList() {
      setTimeout(() => {
        let data = [
          {
            columnCode: '001100',
            columnName: '子专题一',
            widgetName: '测试分区一'
          },
          {
            columnCode: '002200',
            columnName: '子专题',
            widgetName: '测试分区123',
            widgetFbl: '800*800' //如果有就是固定画布没有就是非固定画布
          }
        ]
        this.setColumnList(data)
      }, 1000)
    },
    handleDrop(e) {
      e.preventDefault()
      e.stopPropagation()
      const index = e.dataTransfer.getData('index')
      const val = e.dataTransfer.getData('val')
      const component = componentList[index]
      console.log(val, component)
      // this.addEchartsExapmleData({ val, uuid: guid(), component })
    },
    handleDragOver(e) {
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },
    getDivData(){ //获取外框数据，现在没有这个接口，现在返回的是html
      let w = document.documentElement.clientWidth; //可视窗口的宽
      let h = document.documentElement.clientHeight; //可视窗口的高
      let data = [
        {
          id:1,
          width:"80%",
          height: "100%"
        }
      ]
      data.map(item => {
        item.width =floatRound(w * perToParseInt(item.width)/100,0) 
        item.height =floatRound(h * perToParseInt(item.height)/100,0) 
      })
      this.setCustomDivList(data)
    }
  }
}
</script>
